﻿@model LeEdu.MODEL.Group

@{
    ViewBag.Title = "GroupSetting";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/bootstrap-3.3.5-dist/jquery-2.0.0.min.js"></script>
<script src="~/bootstrap-3.3.5-dist/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="~/bootstrap-3.3.5-dist/bootstrap-3.3.5-dist/js/npm.js"></script>

<link href="~/bootstrap-3.3.5-dist/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" rel="stylesheet" />
<div id="content-container" class="container">
    <div class="group-header">
        <div class="group-header-inner" style="background: url(http://localhost:5130/Img/@Model.GBACKGROUND); background-repeat: no-repeat; background-size: 100% 100%; ">
            <div class="media">
                <div class="media-left">
                    <a href="/Group/GroupHomepage/@Model.GroupID">
                        <img src="http://localhost:5130/Img/@Model.GLOGO" alt="@Model.GNAME" class="avatar-square-sm">
                    </a>
                </div>
                <div class="media-body">
                    <h2 class="media-heading">@Model.GNAME</h2>
                    <div class="media-metas">
                        @((Model.UserAndGroup).Count) 个成员
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-body">
            <ul class="nav nav-tabs">
                <li><a href="/Group/GroupHomepage/@Model.GroupID">小组首页</a></li>
                <li><a href="/Group/TeamMember/@Model.GroupID">小组成员</a></li>
                <li class="active"><a href="/Group/GroupSetting/@Model.GroupID">小组设置</a></li>
                <li><a href="/Group/HuaTiCreate" target="blank">发表话题</a></li>
            </ul>
            <ul class="nav nav-pills nav-pills-sm mbl" style="margin-bottom:20px;">
                @*<li class="active"><a href="/">编辑小组 </a></li>
                    <li> <a href="/group/1/setting/logo">图标设置</a></li>
                    <li>  <a href="/group/set/backgroundlogo/1">背景设置</a></li>*@
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">编辑小组</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">图标设置</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">背景设置</a></li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <form data-widget-cid="widget-0" novalidate="novalidate" id="user-group-form" class="form-horizontal" method="post" action="/Group/EditGroup/@Model.GroupID">
                        @*<input id="Hidden1" type="hidden" name="GroupID" />*@
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="group_grouptitle">小组名称</label>
                            <div class="col-md-9 controls">
                                <input data-explain="" data-widget-cid="widget-1" id="group_grouptitle" name="GNAME" class="form-control" value="@Model.GNAME" type="text">
                                <div class="help-block" style="display:none;"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="group">小组介绍</label>
                            <div class="col-md-9 controls">
                                <textarea id="container" name="GINTROGUCE" required="required" class="form-control">
                                    @Html.Raw(Model.GINTROGUCE)
                                </textarea>
                                @*<script id="container" name="GINTROGUCE" type="text/plain">
                                    @Html.Raw(Model.GINTROGUCE)
                                </script>*@
                                <script type="text/javascript">
                                    var editor = UE.getEditor('container')
                                </script>
                                
                            </div>
                        </div>

                        <input name="_csrf_token" value="03b8b72d3fb9c5a49139ba300900d7bb1f211390" type="hidden">

                        <div class="row">
                            <div class="col-xs-7 col-xs-offset-2">
                                <button id="group-save-btn" data-submiting-text="正在修改" type="submit" class="btn btn-primary">修改</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">
                    <form class="form-horizontal" action="/Group/GroupImg" method="post" enctype="multipart/form-data">
                        <div class="form-group">
                            <label class="col-md-2 control-label">当前图标</label>
                            <input type="hidden" name="ID" value="@Model.GroupID" />
                            <div class="controls col-md-8 controls">
                                <img id="fileShow" class="avatar-square-md" src="http://localhost:5130/Img/@Model.GLOGO" alt="@Model.GNAME">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-2 control-label">
                            </div>
                            <div class="controls col-md-8 controls">
                                @*<input id="Files" name="Files" type="file" accept="image/*" value="上传图片 " />*@
                                <div class="feedback-editItem" style="margin-top: 20px;">
                                    <div class="booDetailFont" id="imageNameLabel"></div>
                                    <div class="feedbackFileContent" id="feedbackfileContent">
                                        @*<div class="feedbackButton" style="position: absolute">选择新背景</div>*@
                                        <input id="feedbackfile" name="feedbackfile" accept="image/jpeg,image/png,image/jpg,image/bmp" type="file">
                                    </div>
                                </div>
                                <p class="help-block">你可以上传JPG、GIF或PNG格式的文件，文件大小不能超过<strong>2M</strong>。推荐大小（180*180）</p>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="col-md-2 control-label"></div>
                            <div class="controls col-md-8 controls">
                                @*<a data-widget-cid="widget-0" id="group-save-btn" data-upload-token="NHx0bXB8aW1hZ2V8MTQ1MDM3NDY2NnwyOGM5ZTZlZDE3YmE5YjRmZGNiYTQ1Yzc4YjNiY2E3Mw"data-goto-url="/group/1/setting/logoCrop?page=logoCrop" class="btn btn-primary webuploader-container">*@
                                <input class="webuploader-pick" style="border-color: #34A263; background-color: #46C37B; padding: 6px 12px; font-size: 14px; color: #FFF;" type="submit" value="上传新图标" />
                                @*<div style="position: absolute; top: 6px; left: 12px; width: 70px; height: 20px; overflow: hidden; bottom: auto; right: auto;" id="rt_rt_1a6nvsld7dro1lfc12c8dhp1aj11">
                                        <input accept="image" class="webuploader-element-invisible" name="file" type="file">
                                        <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255) none repeat scroll 0% 0%;"></label>
                                        </div>
                                    </a>*@
                                @*<input id="Files" type="file" accept="image/*" value="上传图片 " /></div>*@
                            </div>
                        </div>
                    </form>
                </div>
                <div role="tabpanel" class="tab-pane" id="messages">
                    <form id="group-avatar-form" class="form-horizontal" action="/Group/GroupImg" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="ID" value="@Model.GroupID" />
                        <div class="form-group">
                            <label class="col-md-2 control-label">当前背景</label>
                            <div class="controls col-md-8">
                                <img id="backgrounds" width="730" height="100" @*class="img-responsive"*@ src="http://localhost:5130/Img/@Model.GBACKGROUND">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label" for="form_avatar"></label>
                            <div class="controls col-md-8">
                                <input id="Background" name="Background" type="file" accept="image/*" value="上传背景图片" />
                                <p class="help-block">你可以上传JPG、GIF或PNG格式的文件，文件大小不能超过<strong>2M</strong>。推荐大小（1140*150）</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="controls col-md-8 col-md-offset-2">
                                @*<a id="group-save-btn"
                                    data-upload-token="NHx0bXB8aW1hZ2V8MTQ1MDM3NDUwOHxhNWUzOTdmNjdmNzI3MWFmYTdjMTBiMDIyZDhmNjExMQ"
                                    data-goto-url="/group/1/setting/logoCrop?page=backGroundLogoCrop"
                                    data-submiting-text="正在上传" class="btn btn-primary">上传新背景</a>*@
                                <input class="webuploader-pick" style="border-color: #34A263; background-color: #46C37B; padding: 6px 12px; font-size: 14px; color: #FFF;" type="submit" value="上传新背景" />
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="~/kindeditor（文本域）/kindeditor-min.js"></script>
<script type="text/javascript">
    KindEditor.ready(function (K) {
        var editor = K.create('#container', {
            //上传管理
            uploadJson: 'kindeditor/asp.net/upload_json.ashx',
            //文件管理
            fileManagerJson: 'kindeditor/asp.net/file_manager_json.ashx',
            allowFileManager: true,
            //设置编辑器创建后执行的回调函数
            afterCreate: function () {
                var self = this;
                K.ctrl(document, 13, function () {
                    self.sync();
                    K('form[name=example]')[0].submit();
                });
                K.ctrl(self.edit.doc, 13, function () {
                    self.sync();
                    K('form[name=example]')[0].submit();
                });
            },
            //上传文件后执行的回调函数,获取上传图片的路径
            afterUpload: function (url) {
                alert(url);
            },
            //编辑器高度
            width: '100px',
            //编辑器宽度
            height: '200px;',
            //配置编辑器的工具栏
            items: [
            'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
            'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
            'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
            'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
            'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
            'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
            'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
            'anchor', 'link', 'unlink', '|', 'about'
            ]
        });
        prettyPrint();
    });
    $(function () {

        $("#feedbackfile").on("change", function () {
            var file = this.files[0];
            if (this.files && file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("#fileShow").attr('src', e.target.result);
                }
                reader.readAsDataURL(file);
            }
        })

        $("#Background").on("change", function () {
            var file = this.files[0];
            if (this.files && file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("#backgrounds").attr('src', e.target.result);
                }
                reader.readAsDataURL(file);
            }
        })
    })

</script>

<script >
    KindEditor.ready(function (K) {
        var editor = K.create('#container', {
            //上传管理
            uploadJson: 'kindeditor/asp.net/upload_json.ashx',
            //文件管理
            fileManagerJson: 'kindeditor/asp.net/file_manager_json.ashx',
            allowFileManager: true,
            //设置编辑器创建后执行的回调函数
            afterCreate: function () {
                var self = this;
                K.ctrl(document, 13, function () {
                    self.sync();
                    K('form[name=example]')[0].submit();
                });
                K.ctrl(self.edit.doc, 13, function () {
                    self.sync();
                    K('form[name=example]')[0].submit();
                });
            },
            //上传文件后执行的回调函数,获取上传图片的路径
            afterUpload: function (url) {
                alert(url);
            },
            //编辑器高度
            width: '100px',
            //编辑器宽度
            height: '200px;',
            //配置编辑器的工具栏
            items: [
            'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
            'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
            'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
            'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
            'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
            'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
            'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
            'anchor', 'link', 'unlink', '|', 'about'
            ]
        });
        prettyPrint();
    });
</script>